<template>
  <div class="p-4">
    <Card :tab-list="tabList" :active-tab-key="key" @tab-change="onTabChange">
      <p v-if="key === '1'"><LectureNote /></p>
      <p v-else-if="key === '2'"><LessonPlan /></p>
      <p v-else-if="key === '3'"><TeachingStudy /></p>
      <p v-else-if="key === '4'"><TeachingRecord /></p>
      <p v-else-if="key === '5'"><LeaderWork /></p>
      <p v-else><PersonalSummary /></p>
    </Card>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from "vue";
  import { Card } from "ant-design-vue";
  import LessonPlan from "./components/LessonPlan/index.vue";
  import LeaderWork from "./components/leaderWork/index.vue";
  import LectureNote from "./components/LectureNote/index.vue";
  import TeachingStudy from "./components/TeachingStudy/index.vue";
  import TeachingRecord from "./components/TeachingRecord/index.vue";
  import PersonalSummary from "./components/PersonalSummary/index.vue";

  const tabList = [
    {
      key: "1",
      tab: "实习听课记录",
    },
    {
      key: "2",
      tab: "教育实习教案",
    },
    {
      key: "3",
      tab: "教研活动心得",
    },
    {
      key: "4",
      tab: "课堂教学记录",
    },
    {
      key: "5",
      tab: "班主任实习工作",
    },
    {
      key: "6",
      tab: "教育实习个人总结",
    },
  ];

  const key = ref("1");

  function onTabChange(value: string) {
    key.value = value;
  }
</script>
